<template>
  <div class="bgm-wrap" :class="{ top61: pageHeight < 700 }">
    <Header/>

    <img
      class="result-img"
      v-if="resultData.image"
      :src="resultData.image"
    >

    <template v-if="resultData.image">
      <div v-if="isWxBrowser" class="save next-btn fixed"></div>
      <div v-else class="download next-btn fixed" @click="download"></div>
    </template>

    <!-- <div v-else class="loading-box">
      <div class="blob"><h1>AI生成中...</h1></div>
      <div class="blob1"></div>
      <div class="blob2"></div>
        <div class="blob3">
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { resultData, isWxBrowser } from '@/stores'
import { BASE_URL } from '@/request/hostConfig'
import { downloadUrl } from '@/api'

const pageHeight = window.innerHeight

function download() {
  window.open(`${ BASE_URL }${ downloadUrl }?share_id=${ resultData.value.share_id }`)
}
</script>

<style scoped>
  .bgm-wrap {
    background: #f2e9e0 !important;
  }

  .result-img {
    width: 100vw;
    height: auto;
    display: block;
  }

  .fixed {
    bottom: initial !important;
    top: 6.35rem;
  }

  .top61 .fixed {
    top: 6rem;
  }

  .save {
    background-image: url("@/assets/images/save.png");
    pointer-events: none;
  }

  .download {
    background-image: url("@/assets/images/download.png");
  }

  h1 {
    position: relative;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    line-height: 7;
    overflow: hidden;
    background: linear-gradient(90deg, #ffffff50, #ffffff99, #ffffff50);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }

  @keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }

  .blob {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #3023ae 0%, #ff0099 100%);
    box-shadow: 0 0 200px 0 rgba(255, 0, 153, 0.7), 0 0 50px 0 rgba(48, 35, 174, 0.7);
    background-size: 200% 200%;
    animation: ai-blob 3s, gradient 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 4;
  }

  .blob1 {
    width: 220px;
    height: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #3E29C120;
    animation: ai-blob 4s linear infinite;
    animation-direction: reverse;
    z-index: 3;
  }

  .blob2 {
    width: 230px;
    height: 230px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #E3117C20;
    animation: ai-blob 5s linear infinite;
    z-index: 2;
  }

  .blob3 {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #7B20A820;
    animation: ai-blob 3.5s linear infinite;
    z-index: 1;
  }

  @keyframes ai-blob {
    0% {
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    20% {
      border-radius: 60% 40% 40% 60% / 60% 25% 75% 40%;
    }
    40% {
      border-radius: 70% 30% 65% 35% / 80% 45% 55% 20%;
    }
    60% {
      border-radius: 30% 70% 70% 30% / 20% 30% 70% 80%;
    }
    80% {
      border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%;
    }
    100% {
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>